<template>
    <div class="container">
        <div class="rectangular-box">
            <h1 style="text-align: center; color: rgb(16, 15, 15)">用户登录</h1>
            <el-form-item label="账号:" class="text-white">
                <el-input v-model="username" /><br>
            </el-form-item>
            <el-form-item label="密码:" class="text-white">
                <el-input v-model="password" show-password />
            </el-form-item>
            <!-- style="color: white"输入字体变白色 -->
            <div class="button-container">
                <!-- <button @click="login">登录</button> -->
                <el-button @click="login" type="success" plain width="20px">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script >

export default {
    // 定义username和password  用于获取用户输入的用户名和密码  并绑定页面上的两个input标签v-model
    //返回username和password
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        login() {
            //判断账号和密码是否正确
            //if (this.username == this.$store.state.username && this.password == this.$store.state.password) 
            if (this.username == 'abcd' && this.password == '123456') {
                //跳转到用户中心
                this.$router.push('/user')
            } else {
                //如果输入的账号、密码错误，则弹出显示账号密码错误
                alert("账号或密码错误！！")
            }
        }
    }
}

</script>
<style scoped>
.container {
    color: #0f0d0d;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 距离上边边框的长度 */
    height: 100vh;
   
    padding: 10px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* 使背景图片始终保持在同一位置 */
    /* color: white; 输入框前面字体颜色*/
    background-size: cover;
    /* 使背景图片充满整个页面 */
}

.rectangular-box {
    width: 350px;
    background: rgba(230, 219, 219, 0.5);
    padding: 30px 50px 20px 30px;
    border-radius: 25px;
    box-shadow: 0 0 10px #1e2021
}

.text-white {
    color: rgb(23, 21, 21);
}

.button-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-top: 5px;
    /* 根据需要调整按钮与输入框之间的距离 */
}

.el-form-item__label {
    color: rgb(24, 20, 20) !important;
}
</style>